<template>
  <div>
    <a-row :gutter="12" class="mb">
      <a-col :span="24">
        <card :title="'生活'" :routerUrl="'/health/skLifeCard'">
          <template slot="cardMain">
            <a-row :gutter="12">
              <a-col :sm="24" :lg="12" :xl="10">
                <p class="subtitle">睡眠</p>
                <div style="display: flex;">
                  <trends-pie
                    :data="pieData"
                    :width="'100%'"
                    :height="'277px'"
                    :className="'全园'"
                    style="margin-top:35px;"
                  ></trends-pie>
                  <bar
                    :barName="barName"
                    :barData="barData"
                    :seriesName="'平均睡眠时长'"
                    style="margin-top:35px;"
                    :color="['#A9F387', '#48D8BF']"
                    :barWidth="10"
                    :symbolSize="5"
                    :width="'100%'"
                    :height="'277px'"
                  ></bar>
                </div>
              </a-col>
              <a-col :sm="12" :lg="6" :xl="7">
                <p class="subtitle">喝水</p>
                <p>
                  本园喝水平均次数： <span style="color: #33B6A4;">{{ waterAvg }}</span> 次
                </p>
                <stacked-line
                  :width="'100%'"
                  :height="'277px'"
                  :seriesName="seriesName"
                  :xData="waterXData"
                  :data="waterYData"
                ></stacked-line>
              </a-col>
              <a-col :sm="12" :lg="6" :xl="7">
                <p class="subtitle">如厕</p>
                <p>
                  本园如厕平均次数： <span style="color: #33B6A4;">{{ toiletAvg }}</span> 次
                </p>
                <stacked-line
                  :width="'100%'"
                  :height="'277px'"
                  :seriesName="seriesName"
                  :xData="toiletXData"
                  :data="toiletYData"
                ></stacked-line>
              </a-col>
            </a-row>
          </template>
        </card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import TrendsPie from '@/components/Echarts/TrendsPie.vue'
import Bar from '@/components/Echarts/Bar.vue'
import StackedLine from '@/components/Echarts/StackedLine.vue'
import { getAction } from '@/api/manage.js'
import { UI_CACHE_DB_DICT_DATA } from '@/store/mutation-types'
import {filterDictTextByCache} from '@/components/dict/JDictSelectUtil'
import Vue from 'vue'
export default {
  name: 'indexSports',
  data() {
    return {
      pieData: [],
      barName: [],
      barData: [],
      seriesName: [],
      waterXData: [],
      waterYData: [],
      toiletXData: [],
      toiletYData: [],
      classType: [],
      waterAvg: 0,
      toiletAvg: 0,
      classList:[]
    }
  },
  components: {
    TrendsPie,
    Bar,
    StackedLine
  },

  filters: {},

  computed: {},

  created() {
    
    this.getClassList();
  },

  activated() {},

  mounted() {
    // this.classType = Vue.ls.get(UI_CACHE_DB_DICT_DATA).class_type
  },

  methods: {
    getClassList(){
      const url = "/management/skClass/list"
      getAction(url).then((res)=>{
      if(res.success){
        this.classType = this.unique(res.result)
        this.classType.forEach(el => {
          this.seriesName.push(filterDictTextByCache("class_type",el.classType))
        });
        this.getSleep()
        this.getWater()
        this.getToilet()
      } else {
        this.$message.warning(res.message);
      }
      }).catch((error)=>{
        console.error(error);
      })
    },
    unique(arr){
      const res= new Map()
      return arr.filter((a)=> !res.has(a.classType) && res.set(a.classType,1))
    },
    getSleep() {
      const url = '/health/sleep/lifeRecordList'
      const params = {
        queryDate: this.$skCommon.getDate(0)
      }
      getAction(url, params)
        .then(res => {
          if (res.success) {
            let detail = res.result[res.result.length - 1]
            detail.detail.map((item, index) => {
              this.barName.push(item.className)
              this.barData.push(Number(item.average).toFixed(2))
            })
            this.pieData = [
              {
                name: '未戴',
                value: detail.notWear
              },
              {
                name: '未睡眠',
                value: detail.unsleep
              },
              {
                name: '一般',
                value: detail.medium
              },
              {
                name: '良',
                value: detail.good
              },
              {
                name: '差',
                value: detail.poor
              },
              {
                name: '优',
                value: detail.excellent
              }
            ]
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(error => {
          console.error(error)
        })
    },
    getWater() {
      const url = '/cockpit/drink'
      this.waterXData.push('周一', '周二', '周三', '周四', '周五', '周六', '周日')
      let day = this.$skCommon.getCurrentWeekDays()
      getAction(url)
        .then(res => {
          if (res.success) {
            for (let i = 0; i < this.classType.length; i++) {
              const classTypeItem = this.classType[i]
              this.waterYData.push([])
              this.waterAvg = Number(res.result.avg).toFixed(2)
              day.forEach(item => {
                let dataItem = res.result.data.find(el => el.date.substring(5) == item&& el.classType == classTypeItem.classType)
                if (dataItem) {
                  this.waterYData[i].push(Number(dataItem.average).toFixed(2))
                } else {
                  this.waterYData[i].push(0)
                }
              })
            }
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(error => {
          console.error(error)
        })
    },
    getToilet() {
      const url = '/cockpit/toilet'
      this.toiletXData.push('周一', '周二', '周三', '周四', '周五', '周六', '周日')
      let day = this.$skCommon.getCurrentWeekDays()
      getAction(url)
        .then(res => {
          if (res.success) {
            this.toiletAvg = Number(res.result.avg).toFixed(2)  
            for (let i = 0; i < this.classType.length; i++) {
              const classTypeItem = this.classType[i];
              this.toiletYData.push([]);
              day.forEach(item => {
                let dataItem  =  res.result.data.find(el=>el.date.substring(5) == item && el.classType == classTypeItem.classType) 
                if (dataItem ) {
                  this.toiletYData[i].push(Number(dataItem.average).toFixed(2))
                }else{
                  this.toiletYData[i].push(0)
                }
              });
            }
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
@img-url: '../../assets/analysis-img/';
.mb {
  margin-bottom: 12px;
}
.subtitle {
  margin: 10px 0 20px 0;
  padding-left: 22px;
  background: url('@{img-url}u93.png') no-repeat 0 50%;
  font-size: 16px;
}
</style>
